<template>
  <div class="card">
    <header class="card-header">
      <h2>身份证号生成器</h2>
    </header>
    <main class="card-body">
      <label for="count-input">
        生成数量:
        <input type="number" id="count-input" v-model.number="count" min="1" max="100" />
      </label>
      <button @click="generateIDNumbers" class="generate-button">生成 ID 号码</button>
      <button v-if="idNumbers.length > 0" @click="copyToClipboard" class="copy-button">复 制</button>
      <button v-if="idNumbers.length > 0" @click="clear" class="clear-button">清 空</button>
      <textarea
        ref="idTextArea"
        readonly
        :value="idNumbers.join('\n')"
        class="output-textarea"
        @mousedown="startResize"
        @mousemove="resize"
        @mouseup="endResize"
      ></textarea>
      
    </main>
  </div>
</template>

<script>
export default {
  data() {
    return {
      count: 1,
      idNumbers: [],
      textareaHeight: 100,
      resizing: false,
    };
  },
  methods: {
    generateIDNumbers() {
      this.idNumbers = [];
      if(this.count > 100){
        this.$toast('最大支持输入100', 2000, 50);
        return;
      }
      for (let i = 0; i < this.count; i++) {
        this.idNumbers.push(this.generateIDCardNumber());
      }
    },
    generateIDCardNumber() {
      const areaCode = "110000"; // 北京市的地区码

      const birthDate = this.randomDate();
      const sequenceCode = this.randomSequenceCode();
      const idWithoutChecksum = `${areaCode}${birthDate}${sequenceCode}`;

      const checksum = this.calculateChecksum(idWithoutChecksum);
      return `${idWithoutChecksum}${checksum}`;
    },
    randomDate() {
      const year = this.randomInteger(1950, 2000); // 随机年份
      const month = this.randomInteger(1, 12).toString().padStart(2, "0"); // 随机月份
      const day = this.randomInteger(1, 28).toString().padStart(2, "0"); // 随机日期，确保安全

      return `${year}${month}${day}`;
    },
    randomSequenceCode() {
      return this.randomInteger(0, 999).toString().padStart(3, "0"); // 随机生成3位顺序码
    },
    randomInteger(min, max) {
      return Math.floor(Math.random() * (max - min + 1)) + min;
    },
    calculateChecksum(idWithoutChecksum) {
      const weights = [7, 9, 10, 5, 8, 4, 2, 1, 6, 3, 7, 9, 10, 5, 8, 4, 2];
      const checksumChars = "10X98765432";

      let sum = 0;
      for (let i = 0; i < idWithoutChecksum.length; i++) {
        sum += parseInt(idWithoutChecksum[i]) * weights[i];
      }

      return checksumChars[sum % 11];
    },
    copyToClipboard() {
      this.$refs.idTextArea.select();
      document.execCommand('copy');
      // alert('ID 号码已复制到剪贴板!');
      this.$toast('ID号码已复制到剪贴板!', 1000, 50);
    },
    startResize(event) {
      this.resizing = true;
      this.textareaHeight = event.clientY;
      window.addEventListener('mouseup', this.endResize);
    },
    resize(event) {
      if (this.resizing) {
        const delta = event.clientY - this.textareaHeight;
        this.$refs.idTextArea.style.height = `${this.$refs.idTextArea.offsetHeight + delta}px`;
      }
    },
    endResize() {
      this.resizing = false;
      window.removeEventListener('mouseup', this.endResize);
    },
    clear() {
      this.idNumbers = [];
    }
  },
};
</script>

<style scoped>
/* 与 UUIDGenerator.vue 中的样式相同 */
.card {
    background-color: #fff;
    border-radius: 20px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
    overflow: hidden;
    width: 600px;
  }
  
  .card-header {
    padding: 20px;
    background-color: #fff;
    border-bottom: 1px solid #ddd;
  }
  
  .card-body {
    padding: 20px;
  }
  
  .generate-button {
    margin-top: 10px;
    margin-bottom: 15px;
    padding: 10px 20px;
    background-color: #007aff;
    color: #fff;
    border: none;
    border-radius: 4px;
    cursor: pointer;
  }

  .copy-button {
    margin-top: 10px;
    margin-left:20px;
    margin-bottom: 15px;
    padding: 10px 20px;
    background-color: #8d9fb3;
    color: #fff;
    border: none;
    border-radius: 4px;
    cursor: pointer;
  }

  .clear-button {
    margin-top: 10px;
    margin-left:20px;
    margin-bottom: 15px;
    padding: 10px 20px;
    background-color: #8d9fb3;
    color: #fff;
    border: none;
    border-radius: 4px;
    cursor: pointer;
  }
  
  .output-textarea {
    width: 100%;
    height: 300px;
    resize: none;
    border: 1px solid #ddd;
    padding: 10px;
    box-sizing: border-box;
    line-height: 1.5;
  }
  
  label {
    display: block;
    margin-bottom: 10px;
  }
  
  input[type="number"] {
    width: 100px;
    padding: 5px;
    border: 1px solid #ddd;
    border-radius: 4px;
  }
</style>